<template>
  <dw-page-warpper>
    <DragCol height="100%" width="100%" :leftPercent="20" :sliderWidth="8" sliderBgColor="#e6ecf5" sliderBgHoverColor="#e6ecf5" @dragging="dragging">
      <template #left>
        <div class="left code-tabs">
          <el-tabs v-model="activeName1" style="width: 100%; height: 100%">
            <el-tab-pane label="服务器" name="服务器" style="height: 100%">
              <dw-tree :getTreeUrl="getTreeUrl" :addTreeUrl="addTreeUrl" :editTreeUrl="editTreeUrl" :delTreeUrl="delTreeUrl" :treeProps="treeProps"></dw-tree>
            </el-tab-pane>
            <el-tab-pane label="文件" name="文件" style="width: 100%; height: calc(100% - 2px)">
              <dw-sftp></dw-sftp>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <template #right>
        <div class="right code-tabs">
          <el-tabs v-model="activeName" style="width: 100%; height: 100%" closable @tab-remove="removeTab">
            <el-tab-pane label="8.134.197.118" name="8.134.197.118" style="height: 100%">
              <div ref="termDomRef" style="width: 100%; height: 100%"></div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
    </DragCol>
  </dw-page-warpper>
</template>

<script lang="ts" setup>
import { Terminal } from '@xterm/xterm';
import { FitAddon } from '@xterm/addon-fit';
import { onMounted, ref } from 'vue';
import type { TabPaneName } from 'element-plus';
import '@xterm/xterm/css/xterm.css';
import { DragCol } from '@/components/vue-resizer';
import DwSftp from '../sftp/index.vue';
defineOptions({
  name: 'ShellIndex',
});
const getTreeUrl: string = '/admin-api/sys/team/tree';
const addTreeUrl: string = '/admin-api/sys/team';
const editTreeUrl: string = '/admin-api/sys/team';
const delTreeUrl: string = '/admin-api/sys/team/{id}';
const treeProps = { label: 'teamName', children: 'children' };
const termDomRef = ref(null);
const domain = window.location.host.split(':')[0];
const port = 8082;
const fitAddon = new FitAddon();
const activeName = ref<string>('8.134.197.118');
const activeName1 = ref<string>('服务器');

onMounted(() => {
  const term = new Terminal({
    lineHeight: 1.0,
    disableStdin: false, //是否禁止输入
    cursorStyle: 'underline', //光标样式
    cursorBlink: true, //光标闪烁
    convertEol: true, //启用时，光标将设置为下一行的开头
    scrollback: 800, //回滚
    tabStopWidth: 8, //制表宽度
  });
  term.open(termDomRef.value as unknown as HTMLElement);
  term.loadAddon(fitAddon);
  fitAddon.fit();
  term.focus();

  term.onData((data) => {
    const sendMsgInfo = {
      operate: 'command',
      command: data,
    };
    ws.send(JSON.stringify(sendMsgInfo));
  });
  term.onResize((size) => {
    console.log(size);
    const sendMsgInfo = {
      operate: 'resize',
      rows: size.rows,
      cols: size.cols,
    };
    ws.send(JSON.stringify(sendMsgInfo));
  });

  const ws = new WebSocket(`ws://${domain}:${port}/admin-api/web/ssh/websocket`);
  ws.onopen = () => {
    const sendMsgInfo = {
      operate: 'connect',
      host: '8.134.197.118', //IP
      port: '22', //端口号
      username: 'root', //用户名
      password: 'Deer@whale', //密码
      rows: term.rows,
      cols: term.cols,
    };
    ws.send(JSON.stringify(sendMsgInfo));
  };
  ws.onmessage = (event) => {
    term.write(event.data);
  };
  ws.onclose = () => {
    term.writeln('');
    term.writeln('');
    term.writeln('\u001B[41m-------------------------------------连接失败-------------------------------------\u001B[0m');
    term.writeln('');
    term.writeln('');
  };
});
const dragging = () => {
  fitAddon.fit();
  // alert(left)
};
window.addEventListener('resize', () => {
  fitAddon.fit();
});
const removeTab = (targetName: TabPaneName) => {
  // const tabs = editableTabs.value
  // let activeName = editableTabsValue.value
  // if (activeName === targetName) {
  //   tabs.forEach((tab, index) => {
  //     if (tab.name === targetName) {
  //       const nextTab = tabs[index + 1] || tabs[index - 1]
  //       if (nextTab) {
  //         activeName = nextTab.name
  //       }
  //     }
  //   })
  // }
  console.log(targetName);
};
</script>

<style lang="scss" scoped>
.header {
  border-bottom: 1px solid var(--el-border-color);
  height: 38px;
  display: flex;
  justify-content: space-between;
  justify-items: center;
  align-items: center;
  .title {
    font-size: 15px;
    font-weight: bold;
    color: var(--el-color-primary);
  }
}
.main {
  padding: 0;
}
.left {
  // width: 420px;
  height: 100%;
}
.right {
  // width: calc(100% - 422px);
  height: 100%;
  margin-right: 2px;
}

.code-tabs :deep(.el-tabs__nav) {
  padding: 0;
}

.code-tabs :deep(.el-tabs--top > .el-tabs__header .el-tabs__item:nth-child(2)) {
  padding-left: 20px;
}
.code-tabs :deep(.el-tabs__item) {
  padding-left: 20px;
  padding-right: 20px;
}
.code-tabs :deep(.el-tab-pane) {
  height: 100%;
}
.code-tabs :deep(.el-tabs__content) {
  height: 100%;
}
.code-tabs :deep(.el-tabs__header) {
  margin: 0;
}
.code-tabs :deep(.el-tabs__active-bar) {
  height: 3px;
}
</style>
